<!doctype html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      #box {
        position: absolute;
        left: 200px;
        top: 40px;

        width: 100px;
        height: 100px;
        background: red;
      }

      #mark {
        position: absolute;
        left: 500px;
        width: 0px;
        height: 200px;
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <div>
      <button id="btn1">往前</button> | <button id="btn2">往后</button>
      <button id="btn3">往上</button> | <button id="btn4">往下</button>
    </div>
    <div id="box"></div>
    <div id="mark"></div>
    <script src="utils.js"></script>
    <script>
      const btn1 = C.$("#btn1");
      const btn2 = C.$("#btn2");
      const btn3 = C.$("#btn3");
      const btn4 = C.$("#btn4");
      const box = C.$("#box");

      btn1.onclick = (ev) => {
        clearInterval(box.timer);
        box.timer = setInterval(() => {
          let speed = parseInt(C.getStyle(box, "left")) + 4;

          if (speed > 500) {
            speed = 500;
          }
          box.style.left = speed + "px";

          if (speed == 500) {
            clearInterval(box.timer);
          }
        }, 1000 / 30);
      };

      btn2.onclick = (ev) => {
        clearInterval(box.timer);
        box.timer = setInterval(() => {
          let speed = parseInt(C.getStyle(box, "left")) + -4;

          if (speed < 0) {
            speed = 0;
          }
          box.style.left = speed + "px";

          if (speed == 0) {
            clearInterval(box.timer);
          }
        }, 1000 / 30);
      };

      btn3.onclick = (ev) => {
        clearInterval(box.timer);
        box.timer = setInterval(() => {
          let speed = parseInt(C.getStyle(box, "top")) + -4;

          if (speed < 0) {
            speed = 0;
          }
          box.style.top = speed + "px";

          if (speed == 0) {
            clearInterval(box.timer);
          }
        }, 1000 / 30);
      };

      btn4.onclick = (ev) => {
        clearInterval(box.timer);
        box.timer = setInterval(() => {
          let speed = parseInt(C.getStyle(box, "top")) + 4;

          if (speed > 500) {
            speed = 500;
          }
          box.style.top = speed + "px";

          if (speed == 0) {
            clearInterval(box.timer);
          }
        }, 1000 / 30);
      };
    </script>
  </body>
</html>
